<template>
	<view class="header">
		<carHeader :title="'维修记录'"></carHeader>
		<view class="headerfirst">
			<view class="v1">核销码：<text>WE323435V</text></view>
			<image class="img1" src="../../static/车联网服务-08我的-03我的维修_slices/二维码.png" mode=""></image>
		</view>
		<view class="headertwo">
			<text class="t0">维修信息</text>
			<view class="xian"></view>
			<view class="v1">维修单号：<view>3535252</view>
			</view>
			<view class="v1">维修状态：<view>进行中</view>
			</view>
			<view class="v1">车主姓名：<view>张</view>
			</view>
			<view class="v1">联系方式：<view>1993829282</view>
			</view>
			<view class="v1">维修方式：<view>上门取车</view>
			</view>
			<view class="v1">取车位置：<view>山阳区32号</view>
			</view>
			<view class="v1">预约时间：<view>2024/08/22 19：02</view>
			</view>
			<view class="v1">提交时间：<view>2024/08/20 19：02</view>
			</view>
		</view>

		<view class="headerthree">
			<!-- 图片上传参考uview第三方组件中的upload上传 -->
			<text class="t0">维修信息</text>
			<view class="xian"></view>
			<view class="v1">维修单号：<view>大客车</view>
			</view>
			<view class="v1">维修状态：<view>豫J45323</view>
			</view>
			<view class="v1">整车照片(最多一张)：</view>
			<view class="image1">
				<!-- 最多上传一张 -->
				<uni-file-picker v-model="imageValue1" fileMediatype="image" mode="grid" @select="select"
					@progress="progress" @success="success" @fail="fail" limit="1"
					:image-styles="imageStyles1"></uni-file-picker>
			</view>
			<view class="v1">维修部位照片（最多三张）：</view>
			<!-- 最多上传三张 -->
			<view class="image1">
				<!-- 最多上传一张 -->
				<uni-file-picker v-model="imageValue2" fileMediatype="image" mode="grid" @select="select"
					@progress="progress" @success="success" @fail="fail" limit="3"
					:image-styles="imageStyles"></uni-file-picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageValue1: [],
				imageValue2: [],
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#b0b0b0",
						width: 2,
						style: 'dashed',
						radius: '2px'
					}
				},
				imageStyles1: {
					width: 100,
					height: 100,
					border: {
						color: "#b0b0b0",
						width: 2,
						style: 'dashed',
						radius: '2px'
					}
				}
			}
		},
		methods: {
			// 获取上传状态
			select(e) {
				console.log('选择文件：', e)
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},

			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			}
		}
	}
</script>

<style lang="scss">
	.header {
		.headerfirst {
			width: 95%;
			margin: 0 auto;
			height: 350rpx;
			background-color: white;
			border-radius: 30rpx;
			position: relative;
			top: -200rpx;

			.v1 {
				position: relative;
				top: 50rpx;
				text-align: center;
			}

			.img1 {
				width: 200rpx;
				height: 200rpx;
				position: relative;
				top: 80rpx;
				left: 255rpx;
			}
		}

		.headertwo {
			width: 93%;
			height: 830rpx;
			padding-left: 20rpx;
			padding-bottom: 80rpx;
			background-color: white;
			margin: 0 auto;
			border-radius: 30rpx;
			position: relative;
			top: -180rpx;

			.t0 {
				font-size: 45rpx;
			}

			.xian {
				width: 95%;
				background-color: gainsboro;
				height: 5rpx;
				margin-top: 20rpx;
			}

			.v1 {
				position: relative;
				left: 20rpx;
				margin-top: 30rpx;
				font-size: 30rpx;

				view {
					text-align: right;
					position: relative;
					left: -60rpx;
					top: -29rpx;
					font-size: 25rpx;
					color: gray;
				}
			}
		}

		.headerthree {
			width: 93%;
			height: 830rpx;
			padding-left: 20rpx;
			background-color: white;
			margin: 0 auto;
			border-radius: 30rpx;
			position: relative;
			top: -100rpx;

			.t0 {
				font-size: 45rpx;
			}

			.xian {
				width: 95%;
				background-color: gainsboro;
				height: 5rpx;
				margin-top: 20rpx;
			}

			.v1 {
				position: relative;
				left: 20rpx;
				margin-top: 30rpx;
				font-size: 30rpx;

				view {
					text-align: right;
					position: relative;
					left: -60rpx;
					top: -29rpx;
					font-size: 25rpx;
					color: gray;
				}
			}

			.image1 {
				position: relative;
				left: 20rpx;
				top: 20rpx;
			}
		}

	}
</style>